<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/treetable/jquery.treetable.css" />
<link rel="stylesheet" href="/css/treetable/jquery.treetable.theme.default.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/lib/layui/css/layui.css">
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap-treeview.css">
</head>
<body>
   <div style="float: left;width: 20%;padding:38px 0px 0px 0px;">
       <div id="treeview"></div>
   </div>
    <div style="float: left;width: 80%">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" >
                <header style="height: 100%">
                    <div align="left">
	                    <table style="width: 100%">
	                   		<tr>
	                   			<td>
								</td>
								<td align="right">
	                   				<button class="layui-btn layui-btn-sm" onclick="location.href='addServer.html'" permission="sys:server:add">
                                      <i class="layui-icon">&#xe608;</i> 添加
                                    </button>
	                   			</td>
	                   		</tr> 
	                    </table>
					</div>
                </header>
                
                <div>
                    <div class="widget-body no-padding">
                        <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                             <tr>
                                 <th width="15%">服务名称</th>
                                 <th width="15%">所属模块</th>
								 <th>访问路径</th>
								 <th width="15%">描述</th>
								 <th width="5%">sort</th>     
								 <th>操作</th>
                             </tr>
                        </table>
                    </div>
                </div>
        </div>
    </div>

</body>
</html>

<script type="text/javascript" src="/js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-treeview.js"></script>
<script type="text/javascript" src="/js/jq.js"></script>
<script type="text/javascript" src="/lib/layui/layui.js"></script>
<script type="text/javascript" src="/js/my/permission.js"></script>
<script type="text/javascript" src="/js/libs/jquery.treetable.js"></script>
<script type="text/javascript">
var pers = checkPermission();
function initMenuList(moduleId){
	$.ajax({
		type : 'post',
		url : '/sys/server/list',
        dataType:"json",
        data:{moduleId:moduleId},
		async:false,
        cache: false,
		success : function(data) {
			var length = data.length;
			for(var i=0; i<length; i++){
				var d = data[i];
				var tr = "<tr data-tt-id='" + d['id'] + "' data-tt-parent-id='" + d['parentId'] + "'>";
				var td1 = "<td>" + d['name'] +"</td>";
				tr += td1;
                var id = "<td>" + d['id'] +"</td>";
                tr += id;
				var path = "";
				if(d['path'] != null){
					path = d['path'];
				}
				var td2 = "<td>" + path +"</td>";
				tr += td2;
				
				var description = d['description'];
				if(description == null){
                    description = "";
				}
				
				var td3 = "<td>" + description +"</td>";
				tr += td3;
				
				var sort = d['sort'];
				if(sort == 0){
					sort = "";
				}
				
				var td4 = "<td>" + sort +"</td>";
				tr += td4;
				
				var id = d['id'];
				var href = "updateServer.html?id=" + id;
				var edit = buttonEdit(href, "sys:server:add", pers);
				var del = buttonDel(id, "sys:server:del", pers);
                tr += "<td>"+edit + del+"</td>";
				tr += "</tr>"
				$("#dt-table").append(tr);
			}
		}
	});
}

layui.use('layer', function(){
    var layer = layui.layer;
});

function del(id){
	layer.confirm('确定要删除吗？', {
        btn : [ '确定', '取消' ]
    }, function() {
        $.ajax({
            type : 'delete',
            url : '/sys/server/' + id,
            success : function(data) {
                location.reload();
            }
        });
    });
}

	var option = {
		expandable : true,
		clickableNodeNames : true,
		onNodeExpand : function() {
			var d = this;
			console.log(d['id']);
			console.log(d['parentId']);
		},
		onNodeCollapse : function() {
			var d = this;
			console.log(d['id'] + "Collapse");
			console.log(d['parentId'] + "Collapse");
		}

	};

	$("#dt-table").treetable(option);

$(function() {
    initModule();
});
function initModule(){
    $.ajax({
        type: 'get',
        dataType: "json",
        url: "/sys/module/treeview",
        cache: false,
        async: false,
        success: function (data) {
            $('#treeview').treeview({
                color: "#428bca",
                expandIcon: 'glyphicon glyphicon-chevron-right',
                collapseIcon: 'glyphicon glyphicon-chevron-down',
                data: data,
                levels: 5,
                onNodeSelected: function(event, data) {
                    $("#dt-table tr").not(":first").remove();
                    initMenuList(data.id);
                }
            });
            //触发第一个Node选中
           $('#treeview li:first').trigger("click");
        }
    });
}
</script>